<template>
<div class="xyt-talk-message">
  <xytDialog ref="xytDialogRef" position="center" @close="closeDialog">
    <div class="xyt-reply-box">
      <textarea placeholder="诉说一下你的烦恼，分享一下你的喜悦"></textarea>
      <span class="count">9/150</span>
    </div>
    <van-radio-group v-model="checked" direction="horizontal">
      <van-radio name="1">随机发送</van-radio>
      <van-radio name="2">指定人</van-radio>
      <van-radio name="3">发送至群</van-radio>
    </van-radio-group>
    <van-field v-if="checked === '1'" v-model="phone" placeholder="请输入手机号" label="手机号"></van-field>
    <van-button type="primary" class="van-block mt20" size="normal" @click="reply">回复</van-button>
  </xytDialog>
</div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import xytDialog from '../common/dialog/xytDialog.vue'
import { Toast } from 'vant'

function open() {
  xytDialogRef.value.open()
}
function close() {
  xytDialogRef.value.close()
}
const xytDialogRef = ref(null)
let checked = ref('1')
let phone = ref('')
defineExpose({
  open
})
const emit = defineEmits(['close'])
function closeDialog() {
  emit('close')
}
function reply() {
  Toast('发送成功！')
  close()
}
onMounted(() => {
})
</script>
<style scoped lang="scss">
.xyt-reply-box {
  position: relative;
  background-color: #eeeeee;
  border-radius: 6px;
  padding: 6px;
  textarea {
    display: block;
    height: 120px;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
  }
  .count {
    position: absolute;
    right: 8px;
    bottom: 4px;
    color: #999;
  }
}
</style>